<template>
  <div class="shopCart-container">
    <nav-bar>
      <div slot="center">购物车</div>
    </nav-bar>

<!--    购物车列表-->
     <div class="cart-container">
       <van-loading v-show="isLoading"  class="loading" size="24px" color="#42bBaa" vertical>加载中...</van-loading>
       <!--       如果购物车为空-->
       <div class="empty-cart" v-if="$store.state.cart.count === 0">
         <img src="https://s10.mogucdn.com/mlcdn/c45406/180704_3ac3b297lghla2jjdhe23d5jfgddf_1500x1170.png"  alt="">
         <p class="empty-text">您的购物车空空如也</p>
         <van-button class="btn" round type="primary" @click="goShopping">去逛一逛</van-button>
       </div>
       <van-checkbox-group v-model="result" @change="changeCheck" >
       <div class="cart-list-item" v-for="(item,index) in cartList" :key="index" ref="cartListItem">
         <van-swipe-cell>
             <van-checkbox class="check-box-unit"  :name="item.id"    checked-color="#ee0a24"></van-checkbox>
           <van-card
               :num="item.num"
               :price="item.goods.price"
               :title="item.goods.title"
               class="goods-card"
               :thumb="item.goods.cover_url"
           />

             <van-field name="stepper" class="count" >
               <template #input >
                 <van-stepper v-model="item.num" @change="changeCount(item)" />
               </template>
             </van-field>

           <template #right>
             <van-button @click="deleteCart(item.id)" square text="删除" type="danger" class="delete-button" />
           </template>
         </van-swipe-cell>
       </div>

       </van-checkbox-group>
       <div class="submitOrder" v-if="$store.state.cart.count !==0">
         <van-submit-bar :disabled="isDisabled" :price="totalPrice" button-text="提交订单" @submit="onSubmit">
           <van-checkbox checked-color="#ee0a24" @click="selectAll" :value="isSelectAll">全选</van-checkbox>
         </van-submit-bar>
       </div>
     </div>
    <tab-bar></tab-bar>
  </div>
</template>

<script>
import NavBar from '../../components/nav-bar/Nav-Bar'
import TabBar from "../../components/tabbar/TabBar";
import {getCartList,deleteCart,checkedCart,changeCartCount} from "../../api/cart/cart";
import {Toast} from 'vant'
export default {
  name: "ShopCart",
  components:{
    NavBar,
    TabBar
  },
  data(){
    return{
      checked:true,
      stepper:1,
      cartList:[],
      isLoading:true,
      result:[],
      isSelectAll:false,
      scroll:'',
      // totalPrice:0
    }
  },
  computed:{
    totalPrice(){
        let sum = 0
        if(this.cartList !== []){
          this.cartList.filter(item => this.result.includes(item.id)).forEach(item =>{
            sum += parseInt(item.goods.price)*parseInt(item.num)*100
          })
        }
        return sum
    },
    isDisabled() {
      return this.result.length === 0
    }
  },
  mounted() {
    this.getCartListData()
  },

  methods: {

    async getCartListData() {
      const res = await getCartList()
      res.status === 200 ? this.isLoading = false : true
      await this.$store.dispatch('cartCount')
      this.cartList = res.data.data
      this.result = this.cartList.filter(item => item.is_checked === 1).map(item => item.id)
    },
    async deleteCart(id) {
      const res = await deleteCart(id)
      if (res.status === 204) {
        Toast.success('移除成功！')
        await this.getCartListData()
        this.$nextTick(()=>{
          // this.$refs.cartListItem.scrollLeft = 0
        })
      } else {
        Toast.success('移除失败！')
      }
    },
    onSubmit() {
      this.$router.push({name:'orderPreview'})
    },
    async changeCheck(result) {
      if(this.cartList.length === result.length){
        this.isSelectAll = true
      }else {
        this.isSelectAll = false
      }
      this.result = result

      await checkedCart(result)

      // console.log(res);
      // await this.getCartListData()

    },

    async changeCount(good){
      // console.log(count);
      let cart = {
        id:good.id,
        num:good.num
      }
      await changeCartCount(cart)
    },
    goShopping(){
      this.$router.push('/home')
    },
    selectAll(){
      if(!this.isSelectAll){
        this.result = this.cartList.map(item => item.id)
      }else {
        this.result = []
      }
    }
  }
}
</script>

<style scoped lang="css">
.goods-card {
  /*margin: 0;*/
  /*width: 100%;*/
  background-color: @white;
  padding-left: 40px;
}

.delete-button {
  height: 100%;

}
   .cart-container{
     padding-top: 45px;
     /*padding-bottom: 100px;*/
   }
   .cart-list-item{
     position: relative;
   }
   .check-box-unit{
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
     left: 2%;
     z-index: 1;
   }
   .empty-cart{
     height: 250px;
     width: 100%;
   }
   .empty-cart img{
     width: 100%;
     height: 100%;
   }
   .btn{
     margin-top: 20px;
     margin-left:calc(50% - 37px);

   }
   .empty-text{
     font-size: 16px;
     color: #5e5e5e;
     text-align: center;
   }
   .info{
     height: 100%;
     max-width: 130px;
     font-size: 14px;
     display: flex;
     flex-flow: column;
     justify-content: space-around;
     /*align-items: center;*/
   }
   .cart-list-item::-webkit-scrollbar { display: none }
   .img-item{
     padding: 5px;
     height: 85%;
     width: 80px;
     /*margin-left: 10px;*/
   }
   img{
     height: 100%;
     width: 100%;
   }
   .van-checkbox__icon{
     width: 12px;
   }
   img{
     width: 100%;
     height: 100%;
   }
   .title{
     font-size: 12px;
     font-weight: bold;
   }
   .price{
     color: red;
     font-size: 16px;
   }
   .count{
     height: 100%;
     font-size: 14px;
     display: flex;
     flex-flow: column;
     justify-content: space-around;
     align-items: center;

   }
   .van-cell{
     background-color: #eeeeee;
     width: 150px;
   }
   .delete{
     height: 80px;
     width: 100px;
     /*background-color: #ee0a24;*/
     color: #fff;
     text-align: center;
     line-height: 80px;
     margin-left: 10px;
   }
   .submitOrder{
     position: fixed;
     width: 100%;
     height: 42px;
     bottom: 58px;
   }
   .van-submit-bar{
     position: unset;
   }
   .van-checkbox{
     width: 30%;
     display: flex;
     align-items: center;
   }
   .count{
     position: absolute;
     top: 50%;
     left: 55%;
     height: 34%;
     width: 34%;
   }
   .van-card__content{
     margin-left: 13px;
   }
   .van-card__num{
     position: absolute;
     top: 2%;
     right: 2%;
   }

</style>
